<template>
                    <div class="fr page">
                        <div class="sui-pagination clearfix">
                                <ul @click.prevent="look">
                                <li class="prev ":class="{'disabled': searchResult.pageNo === 1}" >
                                    <a href="#" :data-page='searchResult.pageNo - 1' >«上一页</a>
                                    <li>
                                    <a href="#" :data-page='1' v-show="nowPage.ready >= 2">1</a>
                                </li>
                                </li>
                                <li class="dotted" v-show="searchResult.pageNo> 4 && searchResult.pageNo <= searchResult.totalPages"><span>...</span></li>
                                <template v-if="nowPage.end">
                                    <li 
                                    v-for="index of nowPage.end" 
                                    :key="index"  
                                    :class='{"active":index === searchResult.pageNo}' 
                                    v-show="index >= nowPage.ready && index <= nowPage.end "
                                    > 
                                    <!-- v-show="index+1 < searchResult.pageNo +  continuousdo && index+1 > searchResult.pageNo - continuousdo" -->
                                    <a href="#" :data-page='index'>{{index}}</a>
                                </li> 
                                    
                                    
                                    </template>                             
                                <li class="dotted" v-show="searchResult.totalPages > 5 &&  nowPage.end + 1< searchResult.totalPages"><span>...</span></li>
                                <li>
                                    <a href="#" :data-page='searchResult.totalPages' v-show="searchResult.totalPages > 5 &&  nowPage.end < searchResult.totalPages">{{searchResult.totalPages}}</a>
                                </li>
                                <li class="next" v-show="searchResult.totalPages > 1" :class="{'disabled': searchResult.pageNo === searchResult.totalPages}">
                                    <a href="#" :data-page='searchResult.pageNo + 1' >下一页»</a>
                                </li>
                                <li><a href="#">共{{searchResult.total}}个商品</a></li>
                            </ul>
                            <div><span>{{searchResult.Totalpage}}</span></div>
                        </div>
                    </div>
</template>

<script>
export default {
    name:'Page',
    methods:{
        look(e){
            let dataset = e.target.dataset.page;
            if(dataset > 0 && dataset <= this.searchResult.totalPages){
                this.$bus.$emit("callback",this.$route.params,{...this.$route.query,pageNo:dataset})
            }
            // this.$bus.$emit('look',e)
        }
    },
    props:['searchResult','continuous'],
    computed:{
        continuousdo(){
            return parseInt(this.continuous/2)
        },
        nowPage(){
            let ready = 0
            let end = 0
            if(this.continuous > this.searchResult.totalPages){
                ready = 1;
                end = this.searchResult.totalPages
            }else{
                ready = this.searchResult.pageNo - this.continuousdo;
                end = this.searchResult.pageNo + this.continuousdo;
                if(ready <= 0){//如果ready小于0了 那么就相当于 排列到底了 让开始等于1 结束等于显示的最大值
                ready = 1;
                end = this.continuous
                }
                else if(end >= this.searchResult.totalPages){
                    ready = this.searchResult.totalPages - this.continuous 
                    end = this.searchResult.totalPages 
                }
            }
            end = parseInt(end)
            ready = parseInt(ready)
            return {ready,end}
        }
    }
}
</script>

<style lang='less' scope>

                .page{
                    // width: 733px;
                    height: 66px;
                    overflow: hidden;
                    float:left;
                    margin-left: 50%;
                    transform: translateX(-50%);
                    .sui-pagination{
                        margin: 18px 0;
                        ul{
                            margin-left: 0;
                            margin-bottom: 0;
                            vertical-align: middle;
                            width:800px;
                            float: left;
                            li{
                                display: flex;
                                justify-content: center;
                                line-height: 18px;
                                display: inline-block;
                                a{
                                    position: relative;
                                    float: left;
                                    line-height: 18px;
                                    text-decoration: none;
                                    background-color: #fff;
                                    border: 1px solid #e0e9ee;
                                    margin-left: -1px;
                                    font-size: 14px;
                                    padding: 9px 18px;
                                    color: #333;
                                }
                                &.active{
                                    a{
                                        background-color: #fff;
                                        color: #e1251b;
                                        border-color: #fff;
                                        cursor: default;
                                    }
                                }
                                &.prev{
                                    a{
                                        background-color: #fafafa;
                                    }
                                }
                                &.disabled{
                                    a{
                                        color: #999;
                                        cursor: default;
                                    }
                                }
                                &.dotted{
                                    span{
                                        margin-left: -1px;
                                        position: relative;
                                        float: left;
                                        line-height: 18px;
                                        text-decoration: none;
                                        background-color: #fff;
                                        font-size: 14px;
                                        border: 0;
                                        padding: 9px 18px;
                                        color: #333;
                                    }
                                }
                                &.next{
                                    a{
                                        background-color: #fafafa;
                                    }
                                }
                            }
                        }
                        div{
                            color: #333;
                            font-size: 14px;
                            float: right;
                            width: 241px;
                        }
                    }
                }
            
</style>